/* 课程卡片样式 */
.courseCard {
  @apply transition-all duration-200 hover:shadow-md;
  border-radius: 8px;
  margin-bottom: 16px;
}

.courseCard.selected {
  @apply border-blue-500 shadow-md;
  border-width: 2px;
}

.cardTitle {
  @apply flex items-center gap-2;
}

.checkbox {
  @apply flex-shrink-0;
}

.colorIndicator {
  @apply w-3 h-3 rounded-full flex-shrink-0;
}

.titleIcon {
  @apply text-blue-500 flex-shrink-0;
}

.courseName {
  @apply font-medium text-gray-900 flex-1 truncate;
  font-size: 14px;
}

.cardContent {
  @apply space-y-2;
}

.infoRow {
  @apply flex items-center gap-1;
  font-size: 13px;
}

.label {
  @apply text-gray-600 flex-shrink-0;
  min-width: 60px;
}

.value {
  @apply text-gray-900 flex-1;
}

.feeValue {
  @apply text-green-600 font-medium flex-1;
}

.teacherIcon {
  @apply text-purple-500 flex-shrink-0;
}

.durationIcon {
  @apply text-orange-500 flex-shrink-0;
}

.categoryRow {
  @apply flex items-start gap-1 pt-1;
  font-size: 13px;
}

.categoryTags {
  @apply flex flex-wrap gap-1 flex-1;
}

.categoryTag {
  @apply text-xs;
  margin: 0;
}

.descriptionRow {
  @apply flex flex-col gap-1 pt-2 border-t border-gray-100;
}

.description {
  @apply text-gray-600 text-xs leading-relaxed;
  word-break: break-all;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .courseCard {
    margin-bottom: 12px;
  }
  
  .cardTitle {
    @apply flex-wrap;
  }
  
  .courseName {
    font-size: 13px;
  }
  
  .infoRow {
    font-size: 12px;
  }
  
  .label {
    min-width: 50px;
  }
  
  .categoryRow {
    @apply flex-col gap-1;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .courseCard {
    @apply bg-gray-800 border-gray-700;
  }
  
  .courseName {
    @apply text-gray-100;
  }
  
  .value {
    @apply text-gray-200;
  }
  
  .feeValue {
    @apply text-green-400;
  }
  
  .label {
    @apply text-gray-400;
  }
  
  .description {
    @apply text-gray-400;
  }
  
  .descriptionRow {
    @apply border-gray-700;
  }
}